<template>
  <div>
    <div v-if="isLogin">
        <van-nav-bar fixed title="登录" left-text left-arrow />
          <div class="login-one">
            <van-cell-group>
              <div @click="iscode" class="area-code">+{{ areaCode }}</div>
            </van-cell-group>
            <van-cell-group>
              <van-field v-model="phoneNO" placeholder="请输入用户名" />
            </van-cell-group>
            <van-cell-group>
              <van-field type="password" v-model="password" placeholder="请输入密码" />
            </van-cell-group>
          </div>

          <div>
            <van-button class="typebutton" type="info" @click="loginBut">登录</van-button>
          </div>
    </div>
   
    <transition name="fade" mode="out-in">
      <div v-if="areaPage">
        <child @getAreaPage="getAreaPage" @getPhoneArea="getPhoneArea"></child>
      </div>
    </transition>
  </div>
</template>
<script>
import child from "../../components/child.vue";
import { Toast } from "vant";
export default {
  data() {
    return {
      phoneNO: "13872235892",
      password: "hq19950405",
      areaCode: "86",
      areaPage: false,
      isLogin:true
    };
  },
  components: {
    child
  },

  mounted() {
    // this.areaCode = this.$route.query.code;
  },
  methods: {
    iscode(){
      this.areaPage = true,
      this.isLogin = false
    },
    //关闭获取区号页
    getAreaPage(status,status1) {
      this.areaPage = status;
      this.isLogin = status1
    },
    // 获取手机号
    getPhoneArea(areaNum) {
      this.areaCode = areaNum;
      console.log(this.areaCode, 999);
    },
    showSheet() {
      this.$router.push({ path: "/country" });
    },
    loginBut() {
      let that = this;
      that.$axios
        .post(that.address.login, {
          phoneNo: this.phoneNO,
          password: this.password,
          type: 0
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$store.commit("getUserMsg", JSON.stringify(res.data.data));
            this.$router.push({ path: "/home" });
          } else {
            Toast({ message: res.data.msg });
          }
        });
     
       
    }
  }
};
</script>
<style lang="less" scope>
.login-one {
  margin-top: 60px;
}
.typebutton {
  width: 95%;
  margin-top: 60px;
}
</style>